<template>
	<div>
		<div class="box">
			<div
				class="title"
				v-if="details.carSourceType == '1' || (details.carSourceType == '3' && showTable)">
				<span class="tag"></span>
				保险费用
			</div>
			<div
				class=""
				v-if="details.carSourceType == '1' || (details.carSourceType == '3' && showTable)">
				<FormItems
					ref="form1"
					v-model="formData"
					:form="formList.insurance"
					:state="state"
					labelWidth="140px"></FormItems>
			</div>
			<!-- <div class="title"> -->
			<!-- <span class="tag"></span> -->
			<!-- 维保费用 -->
			<!-- <span class="price" v-if="config.businessSource == '2'"> -->
			<!-- 合计：￥{{ -->
			<!-- this.formData.maintenanceType == '1' -->
			<!-- ? format_thousand(formData.maintenanceFee) || '-' -->
			<!-- : '-' -->
			<!-- }} -->
			<!-- </span> -->
			<!-- </div> -->
			<!-- <div class=""> -->
			<!-- <!~~ v-if="config.businessSource == '1'" ~~> -->
			<!-- <FormItems -->
			<!-- ref="form2" -->
			<!-- v-model="formData" -->
			<!-- :form="formList.maintain" -->
			<!-- :state="state" -->
			<!-- labelWidth="120px"></FormItems> -->
			<!-- <el-table -->
			<!-- v-if="config.businessSource == '2'" -->
			<!-- :data="formData.maintenanceList" -->
			<!-- border> -->
			<!-- <el-table-column -->
			<!-- label="类别" -->
			<!-- prop="maintenanceItemTypeStr" -->
			<!-- align="center"></el-table-column> -->
			<!-- <el-table-column -->
			<!-- label="保养范围" -->
			<!-- prop="maintenanceItemDetails" -->
			<!-- align="center"></el-table-column> -->
			<!-- <el-table-column -->
			<!-- label="次数" -->
			<!-- prop="maintenanceCount" -->
			<!-- align="center"></el-table-column> -->
			<!-- </el-table> -->
			<!-- </div> -->
			<!-- <div class="title"> -->
			<!-- <span class="tag"></span> -->
			<!-- 上牌费用 -->
			<!-- </div> -->
			<!-- <div class=""> -->
			<!-- <FormItems -->
			<!-- ref="form3" -->
			<!-- v-model="formData" -->
			<!-- :form="formList.license" -->
			<!-- :state="state" -->
			<!-- labelWidth="140px"></FormItems> -->
			<!-- </div> -->
		</div>
	</div>
</template>

<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import FormItem from '@/views/finance/reimburs/formItem/index.vue';
	export default {
		components: { FormItems, FormItem },
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		data() {
			return {};
		},
		dicts: ['quota_added_services_type', 'in_su_rance_com_pany'],
		beforeDestroy() {
			if (this.notEmpty(this.details?.productList?.[this.index])) {
				this.$refs.form1?.form_resetFields?.();
				// this.$refs.form2?.form_resetFields?.();
				// this.$refs.form3?.form_resetFields?.();
			}
		},
		watch: {
			// insuranceCompulsoryDiffAmount_dif: {
			// 	handler(val) {
			// 		this.formData.insuranceCompulsoryDiffAmount = val;
			// 	},
			// 	immediate: true,
			// },
			// insuranceCarvesselDiffAmount_dif: {
			// 	handler(val) {
			// 		this.formData.insuranceCarvesselDiffAmount = val;
			// 	},
			// 	immediate: true,
			// },
			// insuranceCommercialDiffAmount_dif: {
			// 	handler(val) {
			// 		this.formData.insuranceCommercialDiffAmount = val;
			// 	},
			// 	immediate: true,
			// },
			showTable: {
				handler(val) {
					if (val === false) {
						this.initDetaultInsurance();
					}
				},
			},
		},
		inject: ['details_forecast', 'details_config'],
		computed: {
			showTable() {
				let result = false;
				let list = this.formData?.insuranceConfList ?? [];
				for (let index = 0; index < list.length; index++) {
					const element = list[index];
					if (element.purchaserType == '2' || element.purchaserType == '3') {
						result = true;
						break;
					}
				}
				return result;
			},

			index() {
				return 0;
			},
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			// 差价是否大于0
			getIn() {
				return (
					this.formData.insuranceCompulsoryDiffAmount > 0 ||
					this.formData.insuranceCarvesselDiffAmount > 0 ||
					this.formData.insuranceCommercialDiffAmount > 0
				);
			},
			config() {
				return this.details_config();
			},
			details() {
				return this.details_forecast();
			},
			insuranceCompulsoryDiffAmount_dif() {
				let res =
					this.formData?.insuranceCompulsoryCurrentAmount -
					this.formData?.insuranceCompulsoryQuondamAmount;

				if (Number.isFinite(res)) {
					return res;
				} else {
					return undefined;
				}
			},
			insuranceCarvesselDiffAmount_dif() {
				let res =
					this.formData?.insuranceCarvesselCurrentAmount -
					this.formData?.insuranceCarvesselQuondamAmount;

				if (Number.isFinite(res)) {
					return res;
				} else {
					return undefined;
				}
			},
			insuranceCommercialDiffAmount_dif() {
				let res =
					this.formData?.insuranceCommercialCurrentAmount -
					this.formData?.insuranceCommercialQuondamAmount;

				if (Number.isFinite(res)) {
					return res;
				} else {
					return undefined;
				}
			},
			totalMaintenanceFee() {
				let money = 0;
				this.formData?.maintenanceList?.map?.(item => {
					if (item.maintenanceCount && item.maintenanceFee) {
						let itemMoney = this.numberRide(
							item.maintenanceCount * 1,
							item.maintenanceFee * 1,
						);
						if (Number.isFinite(itemMoney)) {
							money = this.numberAdd(money, itemMoney);
						}
					}
				});
				let singleFee = this.numberAdd(money, this.formData?.maintenancePrice ?? 0);
				if (Number.isNaN(singleFee)) return 0;
				let totalFee = this.numberRide(singleFee, this.formData?.plan?.planTenancyType * 1);
				if (Number.isNaN(totalFee)) return 0;
				return totalFee;
			},
			formList() {
				return {
					insurance: [
						{
							label: '保险公司',
							type: 'select',
							prop: 'insuranceCompanyKey',
							selectList: this.dict.type.in_su_rance_com_pany,
							rules: true,
							show: this.details.carSourceType == '3',
							event: {
								type: 'change',
								cb: row => {
									let item = this.dict.type.in_su_rance_com_pany.find(
										e => e.value == row.insuranceCompanyKey,
									);
									if (item) {
										this.formData.insuranceCompanyVal = item.label;
									}
								},
							},
						},
						{
							label: '增值服务特约条款',
							type: 'radioGroup',
							radioGroupList: this.dict.type.quota_added_services_type,
							prop: 'addedServicesType',
							rules: true,
							show: this.details.carSourceType == '3',
						},
						{
							label: '交强险测算金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCompulsoryQuondamAmount',
							state: this.type == 'preview' ? 'readonly' : 'disabled',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							tag: 'price',
						},
						{
							label: '本次交强险金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCompulsoryCurrentAmount',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.insuranceCompulsoryCurrentAmount)) {
										this.formData.planConf.insuranceCompulsoryCurrentAmount_state =
											'changed';
									} else {
										this.formData.planConf.insuranceCompulsoryCurrentAmount_state =
											'';
									}
								},
							},
						},
						{
							label: '交强险差价',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCompulsoryDiffAmount',
							state: this.type == 'preview' ? 'readonly' : 'disabled',
							min: -Infinity,
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '车船税测算金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCarvesselQuondamAmount',
							state: this.type == 'preview' ? 'readonly' : 'disabled',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '本次车船税金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCarvesselCurrentAmount',
							tag: 'price',
							state:
								this.type == 'preview'
									? 'readonly'
									: this.formData.plan.isGreen == 1
									? 'disabled'
									: 'write',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.insuranceCarvesselCurrentAmount)) {
										this.formData.planConf.insuranceCarvesselCurrentAmount_state =
											'changed';
									} else {
										this.formData.planConf.insuranceCarvesselCurrentAmount_state =
											'';
									}
								},
							},
						},
						{
							label: '车船税差价',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCarvesselDiffAmount',
							state: this.type == 'preview' ? 'readonly' : 'disabled',
							tag: 'price',
							min: -Infinity,
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '商业险测算金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCommercialQuondamAmount',
							state: this.type == 'preview' ? 'readonly' : 'disabled',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '本次商业险金额(年)',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCommercialCurrentAmount',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.insuranceCommercialCurrentAmount)) {
										this.formData.planConf.insuranceCommercialCurrentAmount_state =
											'changed';
									} else {
										this.formData.planConf.insuranceCommercialCurrentAmount_state =
											'';
									}
								},
							},
						},
						{
							label: '商业险差价',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'insuranceCommercialDiffAmount',
							state: this.type == 'preview' ? 'readonly' : 'disabled',
							tag: 'price',
							min: -Infinity,
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
						},
						{
							label: '保险询价附件',
							type: 'upload',
							prop: 'insuranceConsultAccessory',
							prototype: {
								listType: 'text',
								isShowTip: false,
								fileType: ['png', 'jpg', 'jpeg', 'doc', 'xls', 'ppt', 'txt', 'pdf'],
							},
							formitemPrototype: {
								style: {
									width: '100%',
								},
							},
							rules: this.getIn(),
							uploadEnd: () => {
								this.$refs.form1.form_clearValidate('insuranceConsultAccessory');
							},
						},
					],
					maintain: [
						{
							label: '维保费用（月）',
							placeholder: '请输入金额',
							tag: 'price',
							type: () => {
								// return "text";
								if (this.formData.maintenanceType == '1') {
									return 'input_number';
								} else {
									return 'text';
								}
							},
							prop: 'maintenancePrice',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.maintenancePrice)) {
										this.formData.planConf.maintenancePrice_state = 'changed';
									} else {
										this.formData.planConf.maintenancePrice_state = '';
									}
								},
							},
						},
					],
					license: [
						{
							label: '上牌费（台）',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'carLicensePrice',
							// min: this.formData.carLicensePrice_calc ?? 0,
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							tag: 'price',
							rules: [
								{
									required: true,
									message: '请输入上牌费',
									trigger: 'blur',
								},
							],
							state:
								this.type == 'preview'
									? 'readonly'
									: this.config?.quotationProductSchemeRule
											?.openRegistrationFeeModification == 1
									? 'write'
									: 'disabled',
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.carLicensePrice)) {
										this.formData.planConf.carLicensePrice_state = 'changed';
									} else {
										this.formData.planConf.carLicensePrice_state = '';
									}
								},
							},
						},
						{
							label: '限牌城市牌照费（台）',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'carLicenseCityPrice',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							tag: 'price',
							state:
								this.type == 'preview'
									? 'readonly'
									: this.config?.quotationProductSchemeRule
											?.openLicenseFeeModification == 1
									? 'write'
									: 'disabled',
							event: {
								type: 'change',
								cb: row => {
									if (this.notEmpty(row.carLicenseCityPrice)) {
										this.formData.planConf.carLicenseCityPrice_state =
											'changed';
									} else {
										this.formData.planConf.carLicenseCityPrice_state = '';
									}
								},
							},
						},
						{
							label: '购置税（台）',
							placeholder: '请输入金额',
							type: 'input_number',
							prop: 'carPurchaseTax',
							tag: 'price',
							prototype: {
								step: 0.01,
								stepStrictly: true,
							},
							state:"readonly"
						},
					],
				};
			},
		},
		created() {
			this.$emitter.on('initDetaultInsurance', this.initDetaultInsurance);
		},
		mounted() {},

		methods: {
			initDetaultInsurance() {
				this.formData.insuranceCompanyKey = undefined;
				this.formData.insuranceCompanyVal = undefined;
				this.formData.addedServicesType = undefined;
				this.formData.insuranceCompulsoryQuondamAmount = undefined;
				this.formData.insuranceCompulsoryCurrentAmount = undefined;
				this.formData.insuranceCompulsoryDiffAmount = undefined;
				this.formData.insuranceCarvesselQuondamAmount = undefined;
				this.formData.insuranceCarvesselCurrentAmount = undefined;
				this.formData.insuranceCarvesselDiffAmount = undefined;
				this.formData.insuranceCommercialQuondamAmount = undefined;
				this.formData.insuranceCommercialCurrentAmount = undefined;
				this.formData.insuranceCommercialDiffAmount = undefined;
				this.formData.insuranceConsultAccessory = undefined;
			},
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (Object.prototype.toString.call(ref) == '[object Array]') {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(ref, 'form_validate');
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(ref, 'form_validate');
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		margin: 20px;
		padding: 20px;
		border-radius: 8px;
		background-color: #fff;
		box-shadow: 0px 1px 3px 1px rgba(0, 28, 54, 0.11);
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-top: 15px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
</style>
